<template>
  <div class="poster_manager">
    <img src="../../../assets/img/modules/poster/manager_01.png" alt="">
    <div class="form_body">
      <div class="list_input">
        <!--<div class="item_input">
          <input type="text" v-model="userName" placeholder="请输入您的姓名（已加密）">
        </div>-->
        <div class="item_input">
          <input type="number" v-model="userPhone" placeholder="请输入您的电话（已加密）"  >
        </div>
        <div class="item_input">
          <input type="number" v-model="phoneCode" placeholder="请输入验证码">
          <span @click="getCode" :style="{color: (codeText === '获取验证码'? '#c9151e': '#a0a0a0')}">{{codeText}}</span>
        </div>
        <button @click="yzPhoneCode">报读后，可领最高4000元补贴</button>
      </div>
    </div>
    <img v-for="img in imgList" :key="img" v-lazy="img" >
    <div class="footer_form_body">
      <div class="list_input">
        <!--<div class="item_input">
          <input type="text" v-model="userName" placeholder="请输入您的姓名（已加密）">
        </div>-->
        <div class="item_input">
          <input type="number" v-model="userPhone" placeholder="请输入您的电话（已加密）" max="99999999999">
        </div>
        <div class="item_input">
          <input type="number" v-model="phoneCode" placeholder="请输入验证码"  max="9999">
          <span @click="getCode" :style="{color: (codeText === '获取验证码'? '#c9151e': '#a0a0a0')}">{{codeText}}</span>
        </div>
        <button @click="yzPhoneCode">最后15天，预留读大学名额</button>
      </div>
    </div>
    <!--客服-->
    <a v-if="this.gsign !== 'wbfst'" class="kf_btn" href="https://webchat.7moor.com/wapchat.html?accessId=023462d0-8040-11e8-9c33-012cab216043&fromUrl=广告-推广&urlTitle=广告推广部">
      <img src="../../../assets/img/modules/poster/kf_btn.png" alt="">
    </a>
  </div>
</template>
<script>
import { isMobile } from '@/utils/validate'
import md5 from 'js-md5'
import debounce from 'lodash/debounce'
export default {
  name: 'poster_manager',
  components: {},
  data () {
    return {
      codeText: '获取验证码',
      gsign: '',
      userName: '',
      school_code: '',
      appid: window.SITE_CONFIG['managerAppId'],
      learn_center_id: '',
      phoneCode: '',
      userPhone: '',
      imgList: [
        'http://m.oucgz.cn/images/manager_03.png',
        'http://m.oucgz.cn/images/manager_04.png',
        'http://m.oucgz.cn/images/manager_05.png',
        'http://m.oucgz.cn/images/manager_06.png',
        'http://m.oucgz.cn/images/manager_07.png'
      ]
    }
  },
  props: {},
  watch: {
    phoneCode: function (newValue, oldValue) {
      this.phoneCode = newValue.replace(/[^\d]/g, '')
      this.phoneCode = newValue.substring(0, 4)
    },
    userPhone: function (newValue, oldValue) {
      this.userPhone = newValue.replace(/[^\d]/g, '')
      this.userPhone = newValue.substring(0, 11)
    }
  },
  methods: {
    /* wf_Huang 2019/9/10 0010 获取验证码 */
    getCode: debounce(function () {
      if (this.codeText === '获取验证码') {
        if (!isMobile(this.userPhone)) {
          this.$toast('请输入正确手机号')
          return false
        }
        var _this = this
        var timeNumber = 60
        this.setIntervalTime = setInterval(function () {
          _this.codeText = `${timeNumber}s重新发送`
          if (timeNumber <= 0) {
            _this.codeText = '获取验证码'
            clearInterval(_this.setIntervalTime)
          }
          timeNumber--
        }, 1000)
        this.$http({
          url: `${window.SITE_CONFIG['readURL']}/index.php?c=api&m=send_sms`,
          method: 'post',
          data: {
            mobile: this.userPhone,
            app: 'gk',
            len: '4',
            sms_token: md5(md5(`${this.userPhone}ENCODEh5_key`))
          },
          withCredentials: false
        }).then(({ data: res }) => {
          if (res.status !== 1) {
            this.$toast('验证码发送失败')
            return false
          }
          this.$toast('短信已发送')
        }).catch(() => {
        })
      }
    }, 1000, { 'leading': true, 'trailing': false }),
    /* wf_Huang 2019/9/10 0010 验证验证码 */
    yzPhoneCode: debounce(function () {
      if (this.phoneCode === '6688') {
        this.setReadUser()
        return false
      }
      /* if (this.userName === '') {
        this.$toast('请输入姓名')
        return false
      } */
      if (!isMobile(this.userPhone)) {
        this.$toast('请输入正确手机号')
        return false
      }
      if (!this.phoneCode) {
        this.$toast('请输入短信验证码')
        return false
      }
      this.$http({
        url: `${window.SITE_CONFIG['readURL']}/index.php?c=api&m=check_sms`,
        method: 'post',
        data: {
          mobile: this.userPhone,
          code: this.phoneCode
        },
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast('验证码错误')
          return false
        }
        this.setReadUser()
      }).catch(() => {
      })
    }, 1000, { 'leading': true, 'trailing': false }),
    /* wf_Huang 2019/8/23 0023 提交预报度  */
    setReadUser () {
      this.$http({
        url: `${window.SITE_CONFIG['readSetURL']}/Prepareorderapi/addPrepareOrder.html?appid=${this.appid}&channel=${this.gsign}&user_name=${this.userPhone}&phone=${this.userPhone}&school_code=${this.school_code}&learn_center_id=${this.learn_center_id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.status !== 1) {
          this.$toast(res.msg)
          return false
        }
        this.codeText = '获取验证码'
        clearInterval(this.setIntervalTime)
        this.phoneCode = ''
        this.$toast('恭喜您，提交成功！\n我们会在一个工作日内联系您')
      }).catch(() => {
      })
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    /* 'gdt' => '广点通',
          'wbfst' => '微博粉丝通',
          'gzbdb_gzh' => '广州本地宝（公众号）',
          'jrtt' => '今日头条',
          'dy' => '抖音',
          'wfwnys' => 'WiFi万能钥匙',
          'zh' => '知乎' */
    if (this.$route.query.school_code) {
      this.school_code = this.$route.query.school_code
    }
    if (this.$route.query.learn_center_id) {
      this.learn_center_id = this.$route.query.learn_center_id
    }
    if (this.$route.query.gsign) {
      this.gsign = this.$route.query.gsign
    }
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .poster_manager {
    max-width: 750px;
    margin: 0 auto;
    img {
      display: block;
      width: 750px;
      height: auto;
    }

    .form_body {
      background: url("../../../assets/img/modules/poster/manager_02.png") no-repeat center;
      background-size: 100% 100%;
      width: 750px;
      height: 1051px;
      padding-top: 350px;
      .list_input {
        margin: 0 auto;
        padding: 55px;
        background-color: #ffffff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        width: 670px;
        height: 450px;

        .item_input {
          border-radius: 10px;
          border: 2px solid #A0A0A0;
          height: 90px;
          display: flex;
          margin-bottom: 30px;
          align-items: center;

          input {
            width: 100%;
            line-height: 86px;
            color: #333333;
            font-size: 33px;
            border: 0;
            border-radius: 10px;
            padding: 0 60px;

            &::placeholder {
              color: #a0a0a0;
              font-size: 33px;
            }
          }

          span {
            display: inline-block;
            color: #c9151e;
            font-size: 33px;
            height: 70px;
            border-left: 2px solid #A0A0A0;
            width: 500px;
            line-height: 70px;
            text-align: center;
          }
        }
      }

      button {
        border-radius: 10px;
        border: 0;
        height: 90px;
        display: flex;
        margin-bottom: 60px;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        background-color: #c9151e;
        color: #ffffff;
        width: 100%;
      }
    }

    .footer_form_body {
      background: url("../../../assets/img/modules/poster/manager_08.png") no-repeat center;
      background-size: 100% 100%;
      width: 750px;
      height: 1051px;
      z-index: 99;
      position: relative;
      .list_input {
        padding: 0 55px;
        background-color: #ffffff;
        border-radius: 10px;
        width: 660px;
        height: 350px;
        position: absolute;
        top: 170px;
        left: 50%;
        transform: translate(-50%, 0);
        .item_input {
          border-radius: 10px;
          border: 2px solid #A0A0A0;
          height: 90px;
          display: flex;
          margin-bottom: 30px;
          align-items: center;

          input {
            width: 100%;
            line-height: 86px;
            color: #333333;
            font-size: 33px;
            border: 0;
            border-radius: 10px;
            padding: 0 60px;

            &::placeholder {
              color: #a0a0a0;
              font-size: 33px;
            }
          }

          span {
            display: inline-block;
            color: #c9151e;
            font-size: 33px;
            height: 70px;
            border-left: 2px solid #A0A0A0;
            width: 500px;
            line-height: 70px;
            text-align: center;
          }
        }
      }

      button {
        border-radius: 10px;
        border: 0;
        height: 90px;
        display: flex;
        margin-bottom: 60px;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        background-color: #c9151e;
        color: #ffffff;
        width: 100%;
      }
    }
    .kf_btn{
      position: fixed;
      right: 30px;
      bottom: 40%;
      width: 110px;
      height: 110px;
      border-radius: 110px;
      z-index: 999;
      background-color: #c9151e;
      box-shadow: 0 0 40px rgba(199, 22, 29, 0.6);
      img{
        width: 110px;
        height: 110px;
      }
    }
  }
</style>
